// 我们采用的是ES6的语法
// 创建Vue对象
let vm = new Vue({
    el: "#app",// 通过ID选择器找到绑定的Html内容
    delimiters: ["[[", "]]"],
    data: { // 数据对象
        // v-model
        username: "",
        password: "",
        password2: "",
        mobile: "",
        image_code: "",
        sms_code: "",
        allow: false,

        // v-show
        error_name: false,
        error_password: false,
        error_password2: false,
        error_mobile: false,
        // error_image_code:"",
        // error_sms_code:"",
        error_allow: false,

        // error_message
        error_name_message: "",
        error_password_message: "",
        error_password2_message: "",
        error_mobile_message: "",
        // error_image_code_message:"",
        // error_sms_code_message:"",
        error_allow_message: "",
    },
    methods: { // 定义和实现事件方法
        // 校验用户名
        check_username() {
            // 用户名是5-20个字符，[a-zA-Z0-9]
            // 定义正则
            let re = /^[a-zA-Z0-9]{5,20}$/
            // 使用正则匹配用户名数据
            if (this.username.match(re)) {
                // 匹配成功，不展示错误提示信息
                this.error_name = false
            } else {
                // 匹配失败，展示错误提示信息
                this.error_name_message = '请输入5-20个字符的用户名'
                this.error_name = true;
            }
            axios.get("/usernames/" + this.username + "/count").
                then((response) => {
                    if (response.data.code==="0"){
                        this.error_name=false
                    }else{
                        this.error_name_message="用户名已存在"
                        this.error_name=true
                    }

            }).catch((error)=>{

            })

        },
        // 校验密码
        check_password() {
            let re = /[a-zA-Z0-9]{5,20}/
            if (this.error_password.match(re)) {
                this.check_password = false
            } else {
                this.error_password_message = '请输入5-20个字符数字和字符的密码'
                this.error_password = true
            }
        },
        // 校验确认密码
        check_password2() {
            if (this.error_password === this.check_password2) {
                this.error_password2 = false
            } else {
                this.error_password2_message = '两次输入密码不一致'
                this.error_password2 = true
            }

        },
        // 校验手机号
        check_mobile() {
            let re = /^1[3-9]\d{9}/
            if (this.mobile.match(re)) {
                this.error_mobile = false
            } else {
                this.error_mobile_message = '你输入的手机号格式不正确'
                this.error_mobile = true
            }

        },
        // 校验图形验证码
        // check_image_code: function () {
        //
        // },
        // 校验短信验证码
        // check_sms_code: function () {
        //
        // },
        // 校验是否勾选协议
        check_allow() {
            if (this.error_allow) {
                this.error_allow = false
            } else {
                this.error_allow_message = '请勾选协议'
                this.error_allow = true
            }

        },
        // 监听表单提交事件
        on_submit(event) {
            this.check_username()
            this.check_password()
            this.check_password2()
            this.check_mobile()
            this.check_allow()

            // 在校验之后，注册数据中，只要有错误，就禁用掉表单的提交事件
            if (this.error_name == true || this.error_password == true || this.error_password2 == true || this.error_mobile == true, this.error_allow == true) {
                // 禁用掉表单的提交事件
                window.event.returnValue = false
                // event.preventDefault()
            }

        },


    }
})


